<template>
  <component :is="componentType" v-bind="componentProps">
    <slot></slot>
  </component>
</template>

<script setup lang="ts" name="SideBarItemLink">
import { isExternal } from "@/utils/valiate"

const props = defineProps<{
  to: string
}>()
// console.log("props", props.to)
const componentType = computed(() => {
  if (isExternal(props.to)) {
    return "a"
  } else {
    return "router-link"
  }
})

const componentProps = computed(() => {
  if (isExternal(props.to)) {
    return {
      href: props.to,
      target: "_blank",
      rel: "noopener"
    }
  } else {
    return {
      to: props.to
    }
  }
})

// console.log(componentType.value, componentProps.value)
</script>
